<script lang="ts" setup>
import type { Attention01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderAttention01.less'

defineOptions({
  name: 'RenderAttention01',
})
const props = defineProps<{
  render: Attention01ComponentMeta
}>()

const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { wraperCls, style } = useCompStyleRender(props)
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('followbox')">
      <img
        :src="render.config.qrCode"
        :class="prefix('followimg')"
      >
      <div :class="prefix('followdesc')">
        {{ props.render.config.text }}
      </div>
    </div>
  </div>
</template>
